<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        li.nochoose{
            /*background-color: red;*/
            border:2px solid bisque;
            background-color: azure;
        }
        li.choose{
            /*background-color: green;*/
            border:2px solid aqua;
            background-color: #bff3ff;
        }
        li{
            list-style-type: none;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            float: left;
            margin-bottom: 10px;
            padding-left: 10px;
            padding-right: 10px;
            margin-left: 20px;
        }
        td{
            padding:4px;
            border-color: rgba(0, 0, 0, 0.24);
            border-style: solid;
            border-width: 0px 1px 1px 0px;
            text-align: left;
        }
        table{
            border-color: rgba(0, 0, 0, 0.24);
            border-style: solid;
            border-width: 1px 0px 0px 1px;
            width:100%;
        }
        .key{
            text-align: center;
        }
        .showinfo{
            height:300px;
            overflow: scroll;
        }
        .center{
            text-align: center;
        }
    </style>
    <script src="{{static_url('js/jquery-3.3.1.min.js')}}"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#uploadFile").change(function(){
                var filePath=$("#uploadFile").val()
                var fileName=filePath.split("\\")[filePath.split("\\").length-1]
                $("#kw").val(fileName)
                //alert(fileName)
                $("#uploadFile").val("")
                setTimeout("$('#info').show()",1000);

            })
        });
        function uploadFile(){
            // $("#kw").val("")
            $("#uploadFile").click()
        }
        // function getInfo(){
        //     var name=$("#kw").val()
        //     window.open("http://114.215.45.246/report/InvoiceReport/invoiceReportTable.do?comName="+name)
        // }
    </script>
</head>
<body>
    <div style="width: 98%;background-color: white;">


        <div style="margin-top: 10px">
            <input id="kw" style="height:40px;margin-left:10%;padding-left:50px;font-size:20px;margin-top:-5px" size="60" placeholder="文件名" disabled />
            <input type="file" value="上传" id="uploadFile" style="display: none">
            <button type="button" style="margin-left:30px;width:100px;height:40px;margin-top:-5px" onclick="uploadFile()">上传</button>
            <!--<button type="button" style="margin-left:10px;width:100px;height:40px;margin-top:-5px" onclick="clearinfo()">清空</button>-->
        </div>
        <div id="info" style="margin-top:20px;display: none;text-align: center">
            <img src="{{static_url('statics/pic/zhongde/WechatIMG496.png')}}"/>
            <table style="margin-top: 20px">
                <tr>
                    <td class="center">序号</td>
                    <td class="center">关键信息</td>
                    <td class="center">描述</td>
                    <td class="center">注意点</td>
                </tr>
                <tr>
                    <td class="center">1</td>
                    <td>银行名称</td>
                    <td>中国农业银行</td>
                    <td>银行存在</td>
                </tr>
                <tr>
                    <td class="center">2</td>
                    <td>打印机构</td>
                    <td>中国农业银行信阳分行</td>
                    <td>打印机构与对账单所属银行一致</td>
                </tr>
                <tr>
                    <td class="center">3</td>
                    <td>打印日期</td>
                    <td>2013年08月17日</td>
                    <td>日期格式正确，日期存在</td>
                </tr>
                <tr>
                    <td class="center">4</td>
                    <td>姓名</td>
                    <td>石国强</td>
                    <td></td>
                </tr>
                <tr>
                    <td class="center">5</td>
                    <td>卡号</td>
                    <td>6228482390608139419</td>
                    <td>卡号与账单所属银行一致</td>
                </tr>
                <tr>
                    <td class="center">6</td>
                    <td>交易记录</td>
                    <td>20130603;ATM交易;转账;支出1100.00;余额37553.38</td>
                    <td>
                        <span>1.日期格式正确，日期存在;</span><br/>
                        <span>2.交易地点无异常;</span><br/>
                        <span>3.摘要无异常;</span><br/>
                        <span>4.支出金额无异常;</span><br/>
                        <span>5.余额无异常。</span>
                    </td>
                </tr>
                <tr>
                    <td class="center">7</td>
                    <td>交易记录</td>
                    <td>20130604;6522;转存;存入9600.00;余额47153.38</td20130604>
                    <td>
                        <span>1.日期格式正确，日期存在;</span><br/>
                        <span style="background-color:red">&nbsp;&nbsp;&nbsp;2.交易地点异常;&nbsp;&nbsp;</span><br/>
                        <span>3.摘要无异常;</span><br/>
                        <span>4.支出金额无异常;</span><br/>
                        <span>5.余额无异常。</span>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>